import React, { useEffect, useState } from "react";
import { Switch } from "@ct0/ui";

const switchContainerStyle = { display: "flex", gap: "20px" };
export default function SwitchPanel() {
  const [value, setValue] = useState(true);
  const onChange = (val) => {
    setValue(val);
  };
  return (
    <div>
      <h2>Switch 开关选择器</h2>
      <ul>
        <li>受控组件，Switch状态将通过props传参中的value值来更新</li>
      </ul>
      <h2>代码演示</h2>
      <div>
        <ul>
          <li key="basic">基础调用</li>
        </ul>
        <div style={switchContainerStyle}>
          <Switch onChange={onChange} value={value} />
          <Switch
            onChange={onChange}
            value={value}
            openText="开呀开开呀开开呀开开呀开"
            closeText="关呀关"
          />
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`
import { Switch } from '@ct0/ui'
const onChange = (newValue: boolean) => { 'update switch value to newValue' }
ReactDOM.render(<Switch onChange={onChange} value={true} />,mountNode)
              `}
            </code>
          </pre>
        </div>
      </div>
      <div>
        <ul>
          <li key="basic">disabled禁用状态</li>
        </ul>
        <div style={switchContainerStyle}>
          <Switch value={true} disabled={true} />
          <Switch value={false} disabled={true} />
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { Switch } from '@ct0/ui'`}
              {"\n"}
              {`ReactDOM.render(`}
              {"\n"}
              {`<Switch value={true} disabled />`},mountNode)
            </code>
          </pre>
        </div>
      </div>
      <div>
        <ul>
          <li key="basic">loading加载中</li>
        </ul>
        <div style={switchContainerStyle}>
          <Switch value={true} loading />
          <Switch value={false} loading />
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { Switch } from '@ct0/ui'`}
              {"\n"}
              {`ReactDOM.render(`}
              {"\n"}
              {`<Switch value={true} loading />`},mountNode)
            </code>
          </pre>
        </div>
      </div>
      <h2>API</h2>
      <table border="1" width="50%">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>value</td>
            <td>switch状态参数(必填)</td>
            <td>boolean</td>
            <td>-</td>
          </tr>
          <tr>
            <td>onChange</td>
            <td>状态改变函数(选填)</td>
            <td>function(value: boolean)</td>
            <td>-</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td>是否禁用开关(选填)</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>loading</td>
            <td>加载中(选填)</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>openText</td>
            <td>开关开启后的内容(选填)</td>
            <td>string</td>
            <td>-</td>
          </tr>
          <tr>
            <td>closeText</td>
            <td>开关关闭后的内容(选填)</td>
            <td>string</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
